import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { push } from '../redux/actions'

export default function Ls() {
  const list = useSelector((state) => {
    return state.ls.list
  })
  const dispatch = useDispatch()
  return (
    <div>
      <h1>ls的代码</h1>
      <input
        type="text"
        placeholder="按下回车键-往无序列表中添加数据"
        onKeyUp={(e) => {
          //用户输入的内容
          const value = e.target.value.trim()
          //判断是否是回车以及value是否为空
          if (e.key !== 'Enter' || !value) return

          // 添加数据
          dispatch(push(value))

          // 清空文本框
          e.target.value = ''
        }}
      />
      <ul>
        {list.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  )
}
